<template>
  <div class="picture">
    <a-spin :spinning="spinning">
    <a-tabs default-active-key="营业额" @change="callback" :activeKey="key">
      <a-tab-pane key="营业额" tab="营业额" class="tab">
        <a-select
          :maxTagCount="15"
          v-model="Syear"
          style="width: 120px"
          :dropdownMenuStyle="{ height: 100 + 'px' }"
        >
          <a-select-option v-for="(i, index) in sales" :key="index" :value="i">
            {{ i }}
          </a-select-option>
        </a-select>
        <div ref="xian" class="an"></div>
      </a-tab-pane>
      <a-tab-pane key="单品销量" tab="单品销量" class="tab">
        <div ref="yuan" class="an"></div>
      </a-tab-pane>
      <a-tab-pane key="订单量" tab="订单量" class="tab">
        <a-select
          :maxTagCount="15"
          v-model="Oyear"
          style="width: 120px"
          :dropdownMenuStyle="{ height: 100 + 'px' }"
        >
          <a-select-option v-for="(i, index) in sales" :key="index" :value="i">
            {{ i }}
          </a-select-option>
        </a-select>
        <div ref="zhu" class="an"></div>
      </a-tab-pane>
    </a-tabs>
    </a-spin>
  </div>
</template>

<script>
// import SockJS from "sockjs-client";
// import Stomp from "stompjs";
import { getTotalSales, getQuantitySold, getOrderNum } from "@/api/report.js";
export default {
  data() {
    return {
      key: "营业额",
      
      //三个表的数据
      saledata:"",
      orderdata:"",
      yuandata: "",

      //年份对应数据
      sales: [],
      orders:[],
      
      //不同年份
      Syear:"",
      Oyear:"",
      
      //两个map
      Salemap:"",
      Ordermap:"",
      Map:new Map(),
      spinning:true,
    };
  },
  mounted() {
    this.spinning=true
    let Salemap = new Map()
    let Ordermap=new Map()
    getTotalSales().then((res) => {
      Salemap.set("2022",[500,900,330])
      Salemap.set("2021",[100,500,900,330,710,203,188,888,777,666,777,444])
      Salemap.set("2020",[500,900,330,710,203,188,888,777,666,777,444,100])
      res.data.map((i) => {
        let y=`${i.year}`
        if (Salemap.get(y)) {
          Salemap.get(y).push(i.value)
        } else {
          Salemap.set(y, [i.value])
        }
      })
      Salemap.forEach((value, key) => {
        console.log(key, value)
        this.sales.push(key)
        
      })
      this.Syear=this.sales[0]
      this.Salemap=Salemap
      this.saledata=this.Salemap.get(this.Syear)
      this.spinning=false
      this.doEchart("xian");
    })
    getQuantitySold().then((res) => {
      res.data.map((i) => (i.name = i.itemName))
      this.yuandata = res.data
    })
    getOrderNum().then((res) => {
      Ordermap.set("2022",[500,900,330])
      Ordermap.set("2021",[100,500,900,330,710,203,188,888,777,666,777,444])
      Ordermap.set("2020",[500,900,330,710,203,188,888,777,666,777,444,100])
      res.data.map((i) => {
        let y=`${i.year}`
        if (Ordermap.get(y)) {
          Ordermap.get(y).push(i.value)
        } else {
          Ordermap.set(y, [i.value])
        }
      })
      Ordermap.forEach((value, key) => {
        console.log(key, value)
        this.orders.push(key)
        
      })
      this.Oyear=this.orders[0]
      this.Ordermap=Ordermap
      this.saledata=this.Ordermap.get(this.Oyear)
    })
  },
  watch:{
    Syear(value){
      this.saledata=this.Salemap.get(value)
      this.doEchart("xian")
    },
    Oyear(value){
      try{
        this.orderdata=this.Ordermap.get(value)
        this.doEchart("zhu")
      }catch(err){

      }
    }
  },
  methods: {
    callback(key) {
      this.key = key;
      if (key === "单品销量") {
        setTimeout(() => {
          this.doEchart("yuan");
        }, 0);
      } else if (key === "订单量") {
        setTimeout(() => {
          this.doEchart("zhu");
        }, 0);
      }
    },
    doEchart(char) {
      //如果图有了则仅仅setOption,没有就新建
      let Chart
      if(this.Map.get(char)){
        Chart=this.Map.get(char)
      }else{
        Chart = this.$echarts.init(this.$refs[char])
        this.Map.set(char,Chart)
      }
      let yuanoption = {
        title: {
          text: "菜品销量",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: this.yuandata,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      let xianoption = {
        xAxis: {
          type: "category",
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.saledata,
            type: "line",
          },
        ],
      };
      let zhuoption = {
        xAxis: {
          type: "category",
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.orderdata,
            type: "bar",
          },
        ],
      };
      let option;
      if (char == "yuan") {
        option = yuanoption
      }
      else if (char == "xian") {
        option = xianoption
      }
      else{
        option = zhuoption
      }
      option && Chart.setOption(option);
    },
    
  },
};
</script>

<style scoped>
.picture {
  padding: 0px 20px;
}
.an {
  width: 100%;
  height: 520px;
}
.tab {
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
}
</style>
